<template>
	<div class="home-page">
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
	</div>
</template>

<script>
	import homeHeader from './components/header'
	import homeSwiper from './components/swiper'
	import homeIcons from './components/icons'
	import homeRecommend from './components/recommend'
	import axios from 'axios'
	export default {
		name:'Home',
		components: {
			homeHeader,
			homeSwiper,
			homeIcons,
			homeRecommend
		},
		data() {
			return {
				swiperList:[],/*轮播图*/
				iconList:[],/*图标*/
				recommendList:[],/*猜你喜欢*/
			}
		},
		methods: {
			/*请求ajax*/
			getHomeInfo() {
				axios.get('/api/index.json')
					.then(this.getHomeInfoSucc)
			},
			/*成功请求ajax*/
			getHomeInfoSucc(res) {
				res=res.data;
				/*如果成功请求，并且有数据*/
				if(res.ret && res.data) {
					const data =res.data;
					this.swiperList=data.swiperList;
					this.iconList=data.iconList;
					this.recommendList=data.likeList;

				}
			}
		},
		/*页面挂载完成后获取ajax请求*/
		mounted() {
			this.getHomeInfo()
		}
	}
</script>

<style lang="scss" scoped>

</style>